<form nz-form [formGroup]="addForm" class="modal-add-form" (ngSubmit)="onSubmit($event)">
    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="groupTypeId" nzRequired>组类型</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="groupTypeId">组类型</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select formControlName="groupTypeId">
                <nz-option *ngFor="let groupType of groupTypes" [nzValue]="groupType.id" 
                [nzLabel]="groupType.display"></nz-option>
            </nz-select>
            <div *ngIf="submitted && fm['groupTypeId'].invalid" class="alert">
                <div *ngIf="fm['groupTypeId'].errors?.['rquired']">请输入组类型</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="groupName" nzRequired>组名</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="groupName">组名</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" nz-input formControlName="groupName" placeholder="标签名" />
            <div *ngIf="submitted && fm['groupName'].invalid" class="alert">
                <div *ngIf="fm['groupName'].errors?.['rquired']">请输入组名</div>
                <div *ngIf="fm['groupName'].errors?.['minlength']">组名不少于2个字</div>
                <div *ngIf="fm['groupName'].errors?.['maxlength']">组名不超过20个字</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="groupCode" nzRequired>组编号</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="groupCode">组编号</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" nz-input formControlName="groupCode" placeholder="标签名" />
            <div *ngIf="submitted && fm['groupCode'].invalid" class="alert">
                <div *ngIf="fm['groupCode'].errors?.['rquired']">请输入组编号</div>
                <div *ngIf="fm['groupCode'].errors?.['minlength']">组名不少于1个字</div>
                <div *ngIf="fm['groupCode'].errors?.['maxlength']">组名不超过64个字</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="remark">描述</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <textarea class="default-input" rows="4" nz-input formControlName="remark" placeholder=""></textarea>
            <div *ngIf="submitted && fm['remark'].invalid" class="alert">
                <div *ngIf="fm['remark'].errors?.['maxlength']">组标签不超过1024个字</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <div nz-row nzJustify="end" class="action-area">
        <div nz-col>
            <button class="dialog-button" nz-button [nzType]="'primary'">添加</button>
            <button class="dialog-button" nz-button (click)="onCancel($event)">取消</button>
        </div>
    </div>
</form>